<!--
 * @Descripttion:
 * @version:
 * @Author: zhanwang
 * @Date: 2021-06-25 14:47:44
 * @LastEditors: zhanwang
 * @LastEditTime: 2021-09-14 18:11:03
-->
<!--  -->
<template>
  <u-table
    ref="plTable"
    :data="nowData"
    max-height='500px'
    use-virtual
    header-drag-style
    :border="false"
    showBodyOverflow="title"
    showHeaderOverflow="title"
    :row-height="rowHeight"
    row-class-name='reportTable'
    header-row-class-name = 'reportTableHeader'
  >
    <u-table-column
      v-for="item in headers"
      :key="item.id"
      :resizable="true"
      :show-overflow-tooltip="true"
      :prop="item.prop"
      :label="item.label"
      :fixed="item.fixed"
      :width="item.width"
      :formatter='item.formatter'
      :class-name="item.prop === 'time' ? 'time': ''"
    />
  </u-table>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({ name: 'Table' })
export default class Table extends Vue {
  @Prop({ default: () => [{}] }) private tableHeaders !: any
  @Prop({ default: () => [{}] }) private tableData !: any
  private rowHeight = 55
  private height = 500
  get nowData () {
    return Object.freeze(this.tableData)
  }

  get headers () {
    let headers
    if (this.tableHeaders.length) {
      headers = this.tableHeaders.filter(item => item.show)
    }
    return headers || [{}]
  }
}
</script>
<style lang='stylus' scoped>
// @import '../base/css/u-table.css'

/deep/.el-table th
  height: 50px;
  background: #FAFAFA;
/deep/.el-table__footer-wrapper tbody td
  background #fff
/deep/.reportTable:last-child
  font-weight: 600
  color #686E84
  *[title='总计']
      font-family: PingFang SC;
      color: #008BEE;
</style>
<style>
.reportTable {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #686E84;
  line-height: 44px;
}
.reportTableHeader{
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #303753;
}
.reportTableHeader .cell.umy-table-beyond {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

</style>
